<template>
  <div class='box'>
    <!-- 健康检测->尿酸记录 -->
    <el-row>
      <el-col :span="12">
        <p>最近一次用户上传尿酸检测结果</p>
        <div v-if="result==null" style="margin-top: 100px;text-align: center;">暂无数据</div>
        <p class="text-center" style="margin-top: 3rem;" v-if="result!==null">
          <span class="detection1">{{ result }}</span>
          <span class="detection2">umol/L</span>
          <span class="detection3">{{ statusText }}</span>
        </p>
        <p class="text-center" v-if="monitorTime!==null">
          检测时间：{{ monitorTime }}
        </p>
      </el-col>
      <el-col :span="12">
        <!-- 饼状图 -->
        <p>历史结果占比</p>
        <echarts v-if="showEcharts" :chartData="chartData" :chartDataTotal="chartDataTotal"/>
      </el-col>
    </el-row>
    <p>数据明细</p>
    <CommonTable :tableData="tableData" :tableHeader="tableHeader" :isOperate="isOperate" :total="total"
      :operateWidth="operateWidth" @sizeChange="sizeChange" @currentChange="currentChange">
    </CommonTable>
  </div>
</template>
 
<script lang='ts' setup>
import { ref, reactive,inject } from "vue";
import CommonTable from "@/components/Table/src/CommonTable.vue";
import echarts from "@/components/Echarts/src/ECharts.vue";
import { userMonitorNsRequest, userMonitorNsPageRequest } from "@/api/user/monitorXt/index";
let userId: any = inject('userId');
const chartData = ref([
  { value: 0, name: '正常' },
  { value: 0, name: '偏高' },
  { value: 0, name: '偏低' }
]);
// 表格所需的数据
let tableData = ref([]);
//表头数据
const tableHeader = reactive([
  {
    prop: "monitorTime",
    label: "日期",
    width: "120px",
    align: "center",
  },
  {
    prop: "result",
    label: "测量值（umol/L）",
    width: "160px",
    align: "center",
  },
  {
    prop: "remark",
    label: "备注",
    align: "center",
  }
]);

const operateWidth = ref(160); // 操作列宽度
const isOperate = ref(false); // 操作列是否显示
const total = ref(0); // 总条数
// 获取统计（尿酸）
const result = ref();
const statusText = ref();
const monitorTime = ref();
const showEcharts = ref(true);
const chartDataTotal = ref();
const getuserMonitorNs = async () => {
  showEcharts.value = false;
  const data: any = await userMonitorNsRequest({ id: userId.value });
  result.value = data.data.result;
  statusText.value = data.data.statusText;
  monitorTime.value = data.data.monitorTime;
  chartData.value[0].value = data.data.normalTotal;
  chartData.value[1].value = data.data.highTotal;
  chartData.value[2].value = data.data.lowTotal;
  chartDataTotal.value = data.data.total;
  showEcharts.value = true;
};
// table数据
const showTable = ref(true)
let pageParams =reactive({
  pageSize: 10,
  pageNum: 1,
  userId: userId.value
})

const getuserMonitorNsPage = async () => {//列表数据
  showTable.value = false;
  tableData.value = []
  const res: any = await userMonitorNsPageRequest(pageParams);
  if (res.code === 2000) {
    tableData.value = res.data.list
    total.value = res.data.total
    showTable.value = true
  } else {
    ElMessage.error(res.data.message)
    return
  }
};
// 分页改变事件
const sizeChange = (val: any) => {
  
  pageParams.pageSize = val;
  getuserMonitorNsPage()
};
// 当前页改变事件
const currentChange = (val: any) => {
  console.log('11111')
  pageParams.pageNum = val;
  getuserMonitorNsPage()
};




getuserMonitorNsPage()
getuserMonitorNs()
</script>
 
<style lang="scss" scoped>
.box {
  .detection1 {
  font-family: Boton-Bold;
  font-size: 60px;
  color: #2B3034;
  letter-spacing: 0;
  text-align: right;
  font-weight: 700;
}

.detection2 {
  font-family: SourceHanSansCN-Medium;
  font-size: 30px;
  color: #2B3034;
  letter-spacing: 0;
  text-align: right;
  font-weight: 500;
}

.detection3 {
  font-family: SourceHanSansCN-Medium;
  font-size: 30px;
  color: #3DCF00;
  letter-spacing: 0;
  text-align: right;
  font-weight: 500;
  margin-left: 10px;
}
}
</style>